﻿@model ScadaWeb.Model.SerieConfigModel
@{
    ViewBag.Title = "Edit";
    Layout = "~/Views/Shared/_LayoutForm.cshtml";
}

<style type="text/css">
    .fr {
        float: right;
    }

    .img-headshot {
        width: 90px;
        height: 90px;
        position: absolute;
        top: -30px;
        border: medium none;
        border-radius: 50%;
        cursor: pointer;
    }
</style>
<form class="layui-form layui-form-pane ok-form" lay-filter="formTest">
    @*一些不需要更新的隐藏字段*@
    @Html.HiddenFor(x => x.Id)
    @Html.HiddenFor(x => x.CreateTime)
    @Html.HiddenFor(x => x.CreateUserId)
    <div class="layui-form-item">
        <label class="layui-form-label">曲线名称</label>
        <div class="layui-input-block">
            <input type="text" name="SerieName" placeholder="曲线名称(英文字符)" autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">曲线标题</label>
        <div class="layui-input-block">
            <input type="text" name="SerieTitle" placeholder="曲线标题" autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">曲线分类</label>
        <div class="layui-input-block">
            <input type="text" name="SerieClassify" placeholder="曲线分类" autocomplete="off" class="layui-input" lay-verify="required">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">曲线宽度</label>
        <div class="layui-input-block">
            <input type="text" name="SerieWidth" placeholder="曲线宽度" autocomplete="off" class="layui-input" lay-verify="number" value="2">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">曲线样式</label>
        <div class="layui-input-block">
            <select id="SerieType" name="SerieType" placeholder="曲线样式" class="layui-input"></select>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">曲线颜色</label>
        <div class="layui-input-block">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="" name="SerieColor" placeholder="请选择曲线颜色" class="layui-input" id="SerieColor-form">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="SerieColor"></div>
            </div>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开启图例</label>
        <div class="layui-input-block">
            <input type="checkbox" name="ShowLegend" id="ShowLegend" title="开启" class="layui-input" lay-verify="required">

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">开启点符号</label>
        <div class="layui-input-block">
            <input type="checkbox" name="ShowSymbol" id="ShowSymbol" title="开启" class="layui-input" lay-verify="required">

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">点符号大小</label>
        <div class="layui-input-block">
            <input type="text" name="SymbolSize" placeholder="点符号大小" autocomplete="off" class="layui-input" lay-verify="number" value="2">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">点符号间隔</label>
        <div class="layui-input-block">
            <input type="text" name="SymbolStep" placeholder="点符号间隔" autocomplete="off" class="layui-input" lay-verify="number" value="2">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">点符号样式</label>
        <div class="layui-input-block">
            <select id="SymbolType" name="SymbolType" placeholder="点符号样式" class="layui-input"></select>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">点符号颜色</label>
        <div class="layui-input-block">
            <div class="layui-input-inline" style="width: 120px;">
                <input type="text" value="" name="SymbolColor" placeholder="请选择点符号颜色" class="layui-input" id="symbolcolor-form">
            </div>
            <div class="layui-inline" style="left: -11px;">
                <div id="symbolcolor"></div>
            </div>

        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script>
    layui.use(["form", "okLayer", "okUtils", 'colorpicker'], function () {
        let form = layui.form;
        let layer = layui.layer;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let colorpicker = layui.colorpicker;
        let $ = layui.$;
        //加载曲线类型
        $.get("/Permissions/SerieConfig/GetItemType?EnCode=SerieType", function (result) {


            for (var i = 0; i < result.length; i++) {

                $("#SerieType").append("<option value='" + result[i].id + "'>" + result[i].name + "</option>");
            }
            $("#SerieType").val('@Model.SerieType');
            layui.form.render("select");

            //重新渲染select
            form.render('select');
        });
        //加载点符号类型
        $.get("/Permissions/SerieConfig/GetItemType?EnCode=SymbolType", function (result) {


            for (var i = 0; i < result.length; i++) {

                $("#SymbolType").append("<option value='" + result[i].id + "'>" + result[i].name + "</option>");
            }

            $("#SymbolType").val('@Model.SymbolType');
            layui.form.render("select");

            //重新渲染select
            form.render('select');
        });

        //给表单赋值
        form.val("formTest", { //formTest 即 class="layui-form" 所在元素属性 lay-filter="" 对应的值
            "SerieName": "@Model.SerieName",
            "SerieTitle": "@Model.SerieTitle",
            "SerieWidth": "@Model.SerieWidth",
            "SerieType": "@Model.SerieType",
            "SerieColor": "@Model.SerieColor",
            "SymbolSize": "@Model.SymbolSize",
            "SymbolType": "@Model.SymbolType",
            "SymbolColor": "@Model.SymbolColor",
            "SymbolStep": "@Model.SymbolStep",
            "ShowSymbol": '@(Model.ShowSymbol=="1"?"true":"false")',
            "SerieClassify": "@Model.SerieClassify",
            "ShowLegend": '@(Model.ShowLegend == "1"?"true":"false")'
        });
        form.render(); //更新全部
        form.on("submit(add)", function (data) {
            okUtils.ajax("/Permissions/SerieConfig/Edit", "post", data.field, true).done(function (response) {
                okLayer.greenTickMsg(response.message, function () {
                    parent.location.reload(); // 父页面刷新
                    parent.layer.close(parent.layer.getFrameIndex(window.name));//先得到当前iframe层的索引 再执行关闭
                });
            }).fail(function (error) {
                console.log(error)
            });
            return false;
        });

        ///

        //表单赋值
        colorpicker.render({
            elem: '#symbolcolor'
          , color: '@Model.SymbolColor'
          , done: function (color) {
              $('#symbolcolor-form').val(color);
          }
        });
        //表单赋值
        colorpicker.render({
            elem: '#SerieColor'
          , color: '@Model.SerieColor'
          , done: function (color) {
              $('#SerieColor-form').val(color);
          }
        });
    });
</script>

